<template>
    <div class="page">
        <div class="pageCenter flexWrap">
            <template v-for="(item,idx) in list">
                <button v-if="!item.id" class="pro-add" @click="toEdit(idx)">
                    <div class="icon">+</div>
                    <div class="name">创建项目</div>
                </button>
                <button v-else class="pro-item" :style="{'background-color':item.bg}" @click="toDetail(idx)">
                    <div class="info">
                        <div class="name">{{item.name}}</div>
                        <div class="flexWrapBetween">
                            <div class="flexWrap item">
                                <div class="t">负责人：</div>
                                <div class="v">{{ item.leaderName }}</div>
                            </div>
                            <div class="flexWrap item">
                                <div class="t">创建于：</div>
                                <div class="v">{{ item.createAtStr }}</div>
                            </div>
                        </div>
                    </div>
                    <button v-if="item.editOk" class="edit" @click="toEdit(idx)" preven>修改</button>
                </button>
            </template>
        </div>

        <!--编辑项目-->
        <el-dialog :visible.sync="edit.show" width="600px" append-to-body border :show-title=false :show-close=false>
            <project-edit v-if="edit.show" :info="edit.info" @complete="edit.show = false; fetchList();" />
        </el-dialog>

        <!--项目概览-->
        <el-dialog :visible.sync="detail.show" width="600px" append-to-body border :show-title=false :show-close=false>
            <project-brief v-if="detail.show" :info="detail.info" @complete="detail.show = false;" />
        </el-dialog>
    </div>
</template>
<script>
import ProjectEdit from "@/views/project/components/projectEdit";
import ProjectBrief from "@/views/project/components/projectBrief";
export default {
    data: function(){
        return {
            userAry:[],
            list:[{}],
            edit:{show:false, info:{}},
            detail:{show:false, info:{id:0}},
        }
    },
    created() {
        this.userAry = this.consts.users()
        this.fetchList();
    },
    components: {
        ProjectEdit,ProjectBrief
    },
    methods: {
        toEdit(idx) {
            let item = this.list[idx]
            this.edit = {show:true, info:{...item}}
        },

        toDetail(idx) {
            let item = this.list[idx]
            this.detail = {show:true, info: item}
        },

        /**************** 接口 ****************/
        fetchList() {
            let _this = this
            this.consts.projects(true,  (ary) =>  {
                this.list = ary
                if (!this.list) this.list = []
                let me = this.auth.getAccount()
                let isAdmin = me.roles.indexOf("1") >= 0
                this.list.forEach(t => {
                    t.createAtStr = this.utils.timeStr(t.createAt, "Y-M-D")
                    t.leaderName = ''
                    t.partners = ""
                    if (t.userAry) {
                        for (let i = 0; i < t.userAry.length; i++) {
                            let u = t.userAry[i]
                            if (u.id == t.leader) {
                                t.leaderName = u.name
                            }
                            t.partners += u.name
                            if (i + 1 < t.userAry.length) {
                                t.partners += "、"
                            }
                        }
                    }

                    t.editOk = isAdmin || me.id == t.leader
                })
                this.list.push({})
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pro-add {
    width: 230px; height: 130px; background-color: #f0f0f0; border-radius: 20px;
    margin: 20px 10px 0 20px; border: 0;

    .icon {
        margin-top: 10px; line-height: 70px; text-align: center;
        font-size: 30px;
    }
    .name {
        line-height: 20px; text-align: center;
        font-size: 16px;
    }
}

.pro-item {
    position: relative; width: 230px; height: 130px; background-color: #f0f0f0; border-radius: 20px;
    margin: 20px 10px 0 20px; border: 0; box-shadow: 1px 1px 1px 0 #cccccc ;

    .info {
        position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; background-color: rgba(255,255,255,0.8);
        border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;

        .name {
            width: 100%; margin: 12px 10px 5px 10px; text-align: left;
            line-height: 20px; font-size: 16px; font-weight: bold;
        }

        .item {
            margin: 0 10px; width: 100%;
            font-size: 10px; color: #888888; line-height: 16px;

            .t {color:#333333; width: 55px; text-align: left}
            .v {}
        }
    }

    .edit {
        position: absolute; right: 10px; top:10px; width: 30px; height: 30px; border-radius: 50%; background-color: #cccccc;
        font-size: 11px; line-height: 30px; text-align: center; border: 0;
    }
}
</style>
